<script setup>
import { ref} from 'vue';
import { getCurrentInstance, reactive } from "vue";
import { defineEmits } from 'vue';
 
const emit1 = defineEmits(['addEventT','back']);
const sendMessageT = () => {
  emit1('addEventT', putMessage() )
}
const back =()=>{
  emit1("back",1)
}
function send(){
    if(isNull(activityName.value)||isDateValid(promote.startDate,promote.endDate)||isHtml(address.value)){
        console.log("sad",isNull(activityName),isDateValid(promote.startDate,promote.endDate),isHtml(address.value));
        alert('请输入完全')
        return 
    }
    sendMessageT()
}

const midul = "midul"
const messageInputLi = ref("messageInput")
const messageInput = "messageText"
const activityName = ref("")
const channel = ref("")
const promote = reactive({
    startDate: '',
    endDate: ''
})
const address = ref("https://arco.design")
const errorMessage = 'error'
//判断有无特殊字符
function hasNoSpecialCharacters(str) {
    const regex = /^[\u4e00-\u9fa5a-zA-Z0-9]+$/;
    return regex.test(str);
}
const allMessage=reactive({
    ActivityName:'',
    Channel:'',
    Pomote:{},
    Address:'',
})
function putMessage(){
    allMessage.ActivityName= activityName
    allMessage.Address = address,
    allMessage.Channel = channel,
    allMessage.Pomote = promote
    return allMessage
}
//判断区域
function isNull(item) {
    if (item == '') { return true }
    else if (!hasNoSpecialCharacters(item)) { return true }
    else { return false }
}
function isDateValid(date1,date2) {
    if (!date1 || !date2) return true;
    else if(new Date(date1)> new Date(date2)){
        return true
    }else{
        return false
    }
}
function isHtml(url){
    const regex = /^(https?:\/\/).+\..+/;
    if (url == '') { return true }
    else if (!regex.test(url)){
        return true
    }
    return false
}

</script>
<template>
    <!-- 中间层表单输入区 -->
    <div>
        <ul :class="midul">
            <li :class="messageInputLi">
                <p style="color: red; ">*</p>
                <p style="margin-right: 30px;">广告来源</p>
                <input type="text" v-model="activityName" placeholder="1231231"> <!--输入即改变value值-->
                <p v-if="isNull(activityName)" :class="errorMessage">不能输入特殊字符，不能为空</p>
            </li>
            <li :class="messageInputLi">
                <p style="color: red; ">*</p>
                <p style="margin-right: 30px;">广告媒介</p>
                <select id="skills" v-model="channel" :class="messageInput" placeholder="请选择">
                    <option value="每日新闻">每日新闻</option>
                    <option value=""> </option>
                </select>
                <p v-if="isNull(channel)" :class="errorMessage">请输入内容，不能为空</p>
            </li>
            <li :class="messageInputLi">
                <p style="color: red; ">*</p>
                <p style="margin-right: 30px;">推广时间</p>
                <input type="datetime-local" :class="messageInput" v-model="promote.startDate">
                <p>-</p>
                <input type="datetime-local" :class="messageInput" v-model="promote.endDate">
                <p v-if="isDateValid(promote.startDate,promote.endDate)" :class="errorMessage">错误输入</p>
            </li>
            <li :class="messageInputLi">
                <p style="color: red; ">*</p>
                <p style="margin-right: 30px;">渠道类型</p>
                <input type="text" :class="messageInput" v-model="address">
                <p v-if="isHtml(address)" :class="errorMessage">如 Android 或 iOS 的下载地址、中间跳转URL，网址必须以 http:// 或 https:// 开头</p>
            </li>
            <li><button @click="send">下一步</button></li>
            <li><button @click="back">上一步</button></li>
            <p>{{ allMessage }}</p>
        </ul>
    </div>
</template>

<style>
.midul {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    height: 400px;
}

.messageInput {
    display: flex;
}

.messageText {
    width: 260px;
}

.error {
    color: red;
}
</style>